<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止默认事件&防止事件冒泡</title>
		<script>
			function clickFun(event) {
				// 阻止默认事件行为
				event.preventDefault()
				console.log('A标签被点击了')
			}
			
			function clickFun2(event) {
				event.stopPropagation() // 阻止事件冒泡
				console.log('子元素')
			}
		</script>
	</head>
	<body>
		<!-- 阻止a标签的默认跳转，执行自定义动作 -->
		<a href="https://www.baidu.com" 
		onclick="clickFun(event)">百度首页</a>
		<!-- 事件冒泡：子元素的事件触发，会向上传导到同区域的父元素 -->
		<div style="width: 300px; height: 300px; background-color: aqua;" 
		onclick="console.log('父元素')">
			<div style="width: 200px; height: 200px; background-color: coral;"
			onclick="clickFun2(event)">
				
			</div>
		</div>
	</body>
</html>